<template>
    <div>
        <Topbar class="top">看房团</Topbar>
        <div class="main">
            <div v-for=" (v,i) in vistive" class="main-inner">
                <div class="inner1">{{v.title}}</div>
                <div>
                    <span class="txt1">发车时间：</span>
                    <span class="txt2">{{v.time}}</span>
                </div>
                <div>
                    <span class="txt1">发车地点：</span>
                    <span class="txt2">{{v.form}}</span>
                </div>
                <div class="inner2">
                    <span>{{v.dizhi}}</span>
                    <span>{{v.price}}</span>
                </div>
                <div class="font">
                    <div class="font-left">电话查询</div>
                    <div class="font-right" @click="baoming(v)">我要报名</div>
                </div>
            </div>
        </div>

        <!--蒙灰层-->
        <transition name="pagein">
            <div class="shaow" v-show="show" @click="disshoaw"></div>
        </transition>
        <transition name="page">
            <div class="visitive" v-show="show">
                <div class="visitive-title">看房团报名</div>
                <div class="visitive-main">
                    <p>
                        <span class="txt">真实姓名：</span>
                        <input type="text">
                    </p>
                    <p>
                        <span class="txt">手机号码：</span>
                        <input type="text">
                    </p>
                    <div>
                        <button class="btn1" @click="disshoaw">取消报名</button>
                        <button class="btn2" @click="addvisitive">确认报名</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import Topbar from '../components/Topbar.vue'
import axios from 'axios'
import {mapState} from 'vuex'
    export default{
        data:function(){
            return {
                show:false,
                aa:[]
            }
        },
        components:{
            Topbar
        },
        computed:{
            ...mapState([
                "vistive"
            ])
        },
        methods:{
            baoming:function(v){
                
                this.show = true;
                // console.dir(v)
                this.aa=v;
            },
            disshoaw:function(){
                this.show = false;
            },
            // 添加我的看房团
            addvisitive:function(){
                this.http.post("/user/islogin")
                .then(res=>{
                    // console.dir(res);
                    if(res.data.err==1){
                        this.$vux.alert.show({
                            title:res.data.msg,
                            onHide(){
                                location.href="/#/login"
                            }
                        })
                    }else{
                        this.http.post("/user/visitive",{visitive:this.aa,username:res.data.userInfo.username})
                        .then(res=>{
                            // console.dir(res);
                            this.$vux.alert.show({
                                title:res.data.msg,
                            })
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
.top{
    position: fixed;
    top:0;
    width: 100%;
}
.main-inner{
    background-color: #F4F4F4;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 20px;
}
.main{
    height: 100vh;
    overflow-y: scroll;
    margin-top: 44px;
}
.main-inner div{
    margin: 8px;
}
.inner1{
    text-align: center;
    font-size: 14px;
}
.inner2{
    display: flex;
    justify-content: space-between;
}
.inner2 span:nth-of-type(1){
    font-size: 12px;
}
.inner2 span:nth-of-type(2){
    font-size: 12px;
    color: #FF7500;
}
.txt1{
    font-size: 14px;
    font-weight: 700;
}
.txt2{
    font-size: 12px;
    color: #666666;
}
.font{
    /*border: 1px solid black;*/
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.font-left{
    background-color: #FFA500;
    color: white;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 6px;
}
.font-right{
    background-color: #14C1F5;
    color: white;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 6px;
}
.shaow{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100vh;
    width:100%;
    position: absolute;
    top:0;
}
.visitive{
    position: absolute;
    top:160px;
    background-color: white;
    left:30px;
    width: 80%;
    text-align: center;
    border-radius: 6px;
}
.visitive-title{
    border-bottom: 1px  solid #eeeeee;
    padding: 10px;
    font-size: 16px;
    font-weight:bold;
}
.visitive-main{
    padding: 8px;
}
.btn2{
    height: 20px;
    width: 40%;
    border:none;
    background-color: #FF6900;
    border-radius: 6px;
    color: white;
    margin-left: 10px;
}
.btn1{
    height: 20px;
    width: 40%;
    border:1px  solid #FF6900;
    border-radius: 6px;
    color: #FF6900;
     background-color: white;
     margin-left: 15px;
}
.txt{
    font-size: 14px;
}
</style>